<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	margin: 0;
	background-image: url("bg1.jpg");
    /* 超出的僵尸不显示为了去掉拖动条*/
    overflow: hidden;
}
img{
position: absolute;
width:60px;
height: 60px;
}
#suc_h3{
float: left;
}
#fail_h3{
float: right;
}
</style>
</head>
<body>
<h3 id="suc_h3">成功数量:0</h3>
<h3 id="fail_h3">失败数量:0</h3>


  <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  <script type="text/javascript">
  			//记录成功数量的变量
  			var sCount=0;
  			//记录失败数量的变量
  			var fCount=0;
			//获取屏幕宽高
			var w=$(window).width();
  		var h=$(window).height();
			$("body").css("background-size",w+"px "+h+"px"); 
			//窗口改变事件
			onresize=function(){
				w = $(window).width();
				h = $(window).height();
				$("body").css("background-size",w+"px "+h+"px"); 
			}
			//开启定时器添加僵尸
			var t1=setInterval(function(){
				var type=parseInt(sCount/20);
				if(type>3){
					type=3;
				}
				//创建僵尸图片并添加
				var img=$("<img src='zomb"+type+".png'>");
				//得到随机top值
				var top=parseInt(Math.random()*(h-60));
				img.css({"left":w+"px","top":top+"px"});
				$("body").append(img);
				//给僵尸图片添加鼠标移入事件
				img.mouseover(function(){
					img.remove();
					sCount++;//成功数量+1
					//显示成功数量
					$("#suc_h3").text("成功数量:"+sCount);
				});
			},100);
			//开启定时器移动僵尸
			var t2=setInterval(function(){
				//得到所有僵尸图片并遍历
				$("img").each(function(){
					//取出图片原来的left
					var oldLeft=parseInt($(this).css("left"));
					//让left值变小
					oldLeft-=(1+parseInt(sCount/20));
					//再把left值放回去
					$(this).css("left",oldLeft+"px");
						//如果僵尸走到房子就删除僵尸
					if(oldLeft<=0){
						$(this).remove();
						fCount++;//失败数量+1
						//控制显示
						$("#fail_h3").text("失败数量:"+fCount);
						//游戏结束判断
						if(fCount>=20){
							alert("游戏结束!");
							//清空僵尸
							$("img").each(function(){
								$(this).remove();
							});
							//停止两个定时器
							clearInterval(t1);
							clearInterval(t2);
						}
					}
				});
			},10);
		</script>
</body>
</html>